<?php
/**
 * 用户绑定
 */
header('Content-Type:text/html;charset=utf8');
require './../wog_act_config.php';
?>

<?php include './../layout/head.inc.php' ?>
<div id="playerVM" class="full-height full-width p-20">
    <template v-if="!actionShow&&player&&player.length">
        <h1 class="text-center text-gold">选择角色登录</h1>
        <div class="d-flex player-list align-items-center justify-content-center text-white">
            <div class="bg-primary pos-r player-item" v-for="item in player" :key="item.p_id"
                 :class="{active:readyChooseId===item.p_id}" @click="chooseItem(item)">
                <div class="box-border-gradient p-20">
                    <div>
                        <strong class="font-size-20 text-gold" v-text="item.p_name"></strong>
                        <strong :style="{color: s_property[item.s_property].color}">（{{s_property[item.s_property].name}}）</strong>
                    </div>
                    <p class="text-grey">等级: <strong v-text="item.p_lv"></strong></p>
                    <p>工会：<strong v-text="item.g_name+' ( Lv '+item.g_lv+' )'"></strong></p>
                    <hr>
                    <div class="avg avg-2">
                        <div class="avg-item">
                            <div>物攻：<strong class="text-gold" v-text="formatBigNum(item.at)"></strong></div>
                        </div>
                        <div class="avg-item">
                            <div>魔攻：<strong class="text-gold" v-text="formatBigNum(item.mat)"></strong></div>
                        </div>
                        <div class="avg-item">
                            <div>物防：<strong class="text-gold" v-text="formatBigNum(item.df)"></strong></div>
                        </div>
                        <div class="avg-item">
                            <div>魔防：<strong class="text-gold" v-text="formatBigNum(item.mdf)"></strong></div>
                        </div>
                    </div>
                    <hr>
                    <div class="avg avg-2">
                        <div class="avg-item">
                            <div>力量：<strong class="text-gold" v-text="formatBigNum(item.str)"></strong></div>
                        </div>
                        <div class="avg-item">
                            <div>智力：<strong class="text-gold" v-text="formatBigNum(item.smart)"></strong></div>
                        </div>
                        <div class="avg-item">
                            <div>敏捷：<strong class="text-gold" v-text="formatBigNum(item.agi)"></strong></div>
                        </div>
                        <div class="avg-item">
                            <div>生命：<strong class="text-gold" v-text="formatBigNum(item.life)"></strong></div>
                        </div>
                        <div class="avg-item">
                            <div>体质：<strong class="text-gold" v-text="formatBigNum(item.vit)"></strong></div>
                        </div>
                        <div class="avg-item">
                            <div>信仰：<strong class="text-gold" v-text="formatBigNum(item.be)"></strong></div>
                        </div>
                        <div class="avg-item">
                            <div>魅力：<strong class="text-gold" v-text="formatBigNum(item.au)"></strong></div>
                        </div>
                    </div>
                </div>
                <div class="pos-a top-left-0 full-width full-height font-size-18 choose-layer d-flex flex-col align-items-center justify-content-center text-prompt"
                     v-if="readyChooseId===item.p_id">再次点击登录角色
                    <a href="javascript:;" class="text-blue font-size-14 mt-10" @click.stop="readyChooseId=''">取消</a>
                </div>
            </div>
        </div>
    </template>
    <div class="bind-form box-border-gold-bg p-20 text-gold" v-if="actionShow==='bind'">
        <div class="font-size-18">绑定角色</div>
        <p class="text-grey">已有角色？有朋友送你角色？买了别人的角色？只要你知道角色的名称、密码，你就可以绑定！</p>
        <p class="text-grey">注意！绑定后请修改<strong class="text-green">角色密码</strong>，避免被人绑定！</p>
        <hr>
        <form ref="bindPlayerRef" class="d-flex align-items-end justify-content-center">
            <div>
                <label class="text-nowrap text-gold mr-10 d-block" for="password">账号密码</label>
                <input id="password" class="game-input full-width mt-5" type="text" name="password"
                       v-model.trim="form.password"
                       placeholder="输入该账号的密码">
            </div>
            <div class="ml-10">
                <label class="text-nowrap text-gold mr-10 d-block" for="p_name">角色名称</label>
                <input id="p_name" class="game-input full-width" mt-5 type="text" name="p_name"
                       v-model.trim="form.p_name"
                       placeholder="输入待绑定角色的名称">
            </div>
            <div class="ml-10">
                <label class="text-nowrap text-gold mr-10 d-block" for="p_password">角色密码</label>
                <input id="p_password" class="game-input full-width mt-5" type="text" name="p_password"
                       v-model.trim="form.p_password"
                       placeholder="输入待绑定角色的密码">
            </div>
            <button type="button" @click="onBinding" class="brick-btn brick-btn-xs ml-10">绑定</button>
        </form>
    </div>

    <div class="text-center mt-20">
        <a href="javascript:;" class="text-prompt" @click="handleChangeActionShow"
           v-text="!actionShow?'绑定已有角色':'选择登录角色'"></a>
        <a href="javascript:;" class="text-blue ml-20" @click="handleCreateNew"
           v-if="player.length<<?= $wog_array['player_num'] ?>">创建新角色</a>
    </div>
</div>
<script src="./../front/dist/player.js?t=<?= $ASSETS_TIME ?>"></script>
<?php include './../layout/foot.inc.php' ?>
